<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pic</title>
<style type="text/css">
body,div,img,input{ margin:0px; padding:0px;}
.picBox{ width:800px; height:600px;}
.btBox{ width:120px; height:25px; position:relative; left:650px; bottom:25px; z-index:999;}
</style>

</head>

<body onload="">
<div class="picBox">
<form name="">
	<img id="pic" src="images/1.png" />
	<div class="btBox">
		<input type="button" onmouseover="show(0)" onmouseout="cunti(0)" value="1" />
		<input type="button" onmouseover="show(1)" onmouseout="cunti(1)" value="2" />
		<input type="button" onmouseover="show(2)" onmouseout="cunti(2)" value="3" />
		<input type="button" onmouseover="show(3)" onmouseout="cunti(3)" value="4" />
	</div>
</form>
</div>
</body>
</html>
<script language="javascript">

function oneByone(){
	var img=document.getElementById("pic");
	img.src="images/"+picName[i];
	i++;
	if(i>=picName.length){
		i=0;
	}
}
function show(j){
	var	img=document.getElementById("pic");
	img.src="images/"+picName[j];
	window.clearInterval(times);
}
function cunti(j){
	i=j;
	times=window.setInterval("oneByone()",1000);
}
var i=0;
var str;
var picName=["1.png","2.png","3.jpg","4.jpg"];
var times=window.setInterval("oneByone()",1000);
</script>
